<@override name="content">
<ul class="pager">
  <li class="previous <#if prevPid==problem.pid>disabled</#if>">
    <a href="problem/show/${prevPid!}" title="Show previous problem."><i class="icon-arrow-left"></i></a>
  </li>
  <li>
  <a href="problem/random" title="Try another problem."><i class="icon-random"></i></a>
  </li>
  <li class="next <#if nextPid==problem.pid>disabled</#if>">
  <a href="problem/show/${nextPid!}" title="Show next problem."><i class="icon-arrow-right"></i></a>
  </li>
</ul>

<div class="text-center">
  <h2>
    <#if userResult??>
    <image src="assets/images/<#if userResult==0>accepted.gif<#else>wrong.gif</#if>" />
    </#if>
    <span class="black pts">${problem.pid!0}:</span> 
    <#if problem.status==false><del></#if>
    <span class="title">${problem.title!}</span>
    <#if problem.status==false></del></#if>
    <#if spj?? && spj><span class="badge badge-important">SPJ</span><br></#if>
  </h2>
  <#if adminUser??>
  <div class="problem-admin">
    <a href="problem/edit/${problem.pid!}?ajax=1" data-toggle="modal" data-target="#editModal" class="btn btn-primary">Edit</a> 
    <a href="problem/rejudge/${problem.pid!}" class="btn btn-danger">Rejudge</a>
  </div>
  </#if>
  Time Limit:<span class="blue">${problem.timeLimit!}MS</span> 
  Memory Limit:<span class="blue">${problem.memoryLimit!}KB</span><br>
  Total Submit:<a href="status?pid=${problem.pid!}">${problem.submission!}</a> 
  Accepted:<a href="status?pid=${problem.pid!}&result=0">${problem.accepted!}</a> 
  Page View:<span class="blue">${problem.view!}</span><br>
  <a href="<#if user??>problem/submit/${problem.pid!}?ajax=1</#if>" class="btn btn-info" data-toggle="modal" data-target="<#if user??>#submitModal<#else>#loginModal</#if>">Submit</a>
  <a href="problem/status/${problem.pid!}" class="btn btn-info">Status</a>
  <a href="discuss?pid=${problem.pid!}" class="btn btn-info">Discuss</a>
</div>

<#if adminUser??>
<div class="modal hide fade problemModal" id="editModal">
  <form class="" action="problem/update" id="editPorblemForm" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="editModalLabel">
        Edit Problem ${problem.pid!}:
        <a href="problem/edit/${problem.pid!}" title="Edit in another page" data-toggle="tooltip" data-placement="bottom">${problem.title!}</a>
      </h3>
    </div>
    <div class="modal-body">
      <a href="problem/edit/${problem.pid!}" class="btn btn-primary">Edit</a>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Save</button>
      <button type="reset" class="btn btn-info">Reset</button>
      <button class="btn" data-dismiss="modal">Cancel</button>
    </div>
  </form>
</div>
</#if> 
<#if user??>
<div class="modal hide fade problemModal" id="submitModal">
  <form class="" id="submitForm" action="solution/save" method="post">
    <div class="modal-header">
      <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
      <h3 id="submitModalLabel">
        Submit Problem ${problem.pid!}:<a href="problem/submit/${problem.pid!}"
          title="Submit in another page" data-toggle="tooltip" data-placement="bottom">${problem.title!}</a>
      </h3>
    </div>
    <div class="modal-body">
      <!--<a href="problem/submit/${problem.pid!}" class="btn btn-primary">Submit</a>-->
      <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      Sorry, youd don't have permission to submit solution.
      </div>
    </div>
    <div class="modal-footer">
      <div class="pull-left">
        <p class="text-error" id="error"></p>
      </div>
      <button type="submit" id="Submit" class="btn btn-primary" accesskey="s">Submit</button>
      <button class="btn" data-dismiss="modal" accesskey="x">Cancel</button>
    </div>
  </form>
</div>
</#if>

<section id="s-description">
  <div class="page-header">
    <h4>Description</h4>
  </div>
  <div class="content" id="description">
    <pre>${problem.description!}</pre>
  </div>
</section>

<section id="s-input">
  <div class="page-header">
    <h4>Input</h4>
  </div>
  <div class="content" id="input">
    <pre>${problem.input!}</pre>
  </div>
</section>

<section id="s-output">
  <div class="page-header">
    <h4>Output</h4>
  </div>
  <div class="content" id="output">
    <pre>${problem.output!}</pre>
  </div>
</section>

<section id="s-sampleInput">
  <div class="tabbable content" id="sampleInput">
    <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab"><strong>Sample Input</strong></a></li>
      <li><a href="#tab2" data-toggle="tab">Raw</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab1">
        <pre>${problem.sampleInput!}</pre>
      </div>
      <div class="tab-pane" id="tab2">
        <textarea id="sampleInput" class="auto-width" rows="${problem.sample_input_rows!12}"
          cols="185">${problem.sampleInput!}</textarea>
      </div>
    </div>
  </div>
</section>

<section id="s-sampleOutput">
  <div class="tabbable content" id="sampleOutput">
    <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
      <li class="active"><a href="#tab3" data-toggle="tab"><strong>Sample Output</strong></a></li>
      <li><a href="#tab4" data-toggle="tab">Raw</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab3">
        <pre>${problem.sampleOutput!}</pre>
      </div>
      <div class="tab-pane" id="tab4">
        <textarea id="sampleOutput" class="auto-width" rows="${problem.sample_output_rows!12}"
          cols="185">${problem.sampleOutput!}</textarea>
      </div>
    </div>
  </div>
</section>

<#if problem.hint?? && problem.hint!="">
<section id="s-hint">
  <div class="page-header">
    <h4>Hint</h4>
  </div>
  <div class="content" id="hint">
    <pre>${problem.hint!}</pre>
  </div>
</section>
</#if> <#if problem.source?? && problem.source!="">
<section id="s-source">
  <div class="page-header">
    <h4>Source</h4>
  </div>
  <div class="content" id="source">
    <pre><a href="problem/search?word=${problem.source!}&scope=source" data-toggle="tooltip" title="Search other problems">${problem.source!}</a></pre>
  </div>
</section>
</#if> <#if tagList??>
<section id="s-tag">
  <div class="page-header">
    <h4>Tag</h4>
  </div>
  <div class="content" id="tag">
    <pre><#list tagList as Tag><a href="problem/search?word=${Tag.tag!}&scope=tag"
        title="${Tag.name!}" data-toggle="tooltip">${Tag.tag!}</a> </#list></pre>
  </div>
</section>
</#if> <#if adminUser??>
<form class="form-inline" action="problem/tag" method="post">
  <input type="hidden" name="op" value="add"> 
  <input type="hidden" name="pid" value="${problem.pid!}"> 
  <input type="text" class="input-small" name="tag" placeholder="Add a tag">
  <button type="submit" class="btn btn-warning">Add</button>
</form>
</#if>

<div class="text-center">
  <a href="<#if user??>problem/submit/${problem.pid!}?ajax=1</#if>" class="btn btn-info" data-toggle="modal" data-target="<#if user??>#submitModal<#else>#loginModal</#if>">Submit</a>
  <a href="problem/status/${problem.pid!}" class="btn btn-info">Status</a>
  <a href="discuss?pid=${problem.pid!}" class="btn btn-info">Discuss</a>
</div>
</@override>

<@override name="scripts">
  <script type="text/javascript">
    $(document).ready(function() {
      jQuery.ajaxSetup({
        cache: true
      });
      var prevpage = "${baseUrl}/problem/show/${prevPid!}";
      var nextpage = "${baseUrl}/problem/show/${nextPid!}";
      $(document).keydown(function(event) {
        <#if prevPid!=problem.pid>if (event.keyCode == 37 && event.ctrlKey)window.location = prevpage;</#if>
        <#if nextPid!=problem.pid>if (event.keyCode == 39 && event.ctrlKey)window.location = nextpage;</#if>
      });
    });
  </script>

  <#if userResult??>
  <script type="text/javascript">
      /*$(document).ready(function() {
        $.getJSON('api/problem/userInfo?pid=' + ${problem.pid}, function(data) {
            if (data.userInfo)
              {
                for (result in data.userInfo)
                {
                  
                }
              }
            });
      });*/
  </script>
</#if>

<#if enableDict??>
  <script src="http://dict.cn/hc/" type="text/javascript"></script>
  <script type="text/javascript">
    dictInit();
  </script>
</#if>
</@override>
<@extends name="../common/_layout.html" />
